<template>
  <bc-modal v-show="getShowSideSlider" ref="modal">
    <transition name="slide">
      <div class="side-slider" v-show="getShowSideSlider">
        <div class="slider-content" ref="content">
          <div class="title border-bottom">
            <span class="title-text">玩法</span>
            <span class="icon" @click="flodSideSlider">
              <i class="iconfont iconty_guanbi"></i>
            </span>
          </div>
          <div class="wrapper">
            <div class="options-detail">
              <div class="play-mode" v-for="(item, pIndex) in options" :key="item.id">
                <div class="play-mode-name border-bottom">{{item.context}}<span class="indicator" v-show="item.currentSubId == getCurrentSubId">({{item.currentSubTab}})</span></div>
                <div class="play-mode-options" v-for="option in item.sub" :key="option.id">
                  <span class="option" 
                    v-for="tabname in option.tabnames" 
                    :class="tabname.id == getCurrentSubId ? 'active' : ''"
                    @click="handlePlayModeSelect(pIndex, tabname.id, tabname.components, tabname.context, option.cate)"
                    :key="tabname.id">
                    {{option.cate == '玩法' ? tabname.context : option.cate + tabname.context}}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </bc-modal>
</template>

<script>
import BcModal from '@/components/base/bc-modal/bc-modal'
import { mapMutations, mapGetters } from 'vuex'
export default {
  components: {
    BcModal
  },
  props: {
    options: {
      type: Array,
      default: function() {
        return [{
          id: 1,
          context: '信用玩法',
          currentComponent: 'tema',
          currentSubTab: '特码',
          currentSubId: 1,
          sub: [
            {
              cate: '玩法',
              tabnames: [
                {
                  id: 1,
                  context: '特码',
                  components: 'tema',
                },
                {
                  id: 2,
                  context: '两面',
                  components: 'liangmian',
                },
                {
                  id: 3,
                  context: '龙虎和',
                  components: 'longhuhe',
                },
                {
                  id: 4,
                  context: '百家乐',
                  components: 'baijiale',
                },
              ]
            }
          ]
        }]
      }
    },
    showSideSlider: {
      type: Boolean,
      default: false
    }
  },
 
  methods: {
    handlePlayModeSelect(pIndex, subId, component, name, cate) {
      var name = cate == '玩法' ? name : cate + name
      this.setCurrentMainTab({mainTabName: this.options[pIndex].context, id:this.options[pIndex].id})
      this.setCurrentTab({subTabName: name, id: subId})
      this.setCurrentComponent(component)
      this.setCurrentId(subId)
      let clonedOptions = JSON.parse(JSON.stringify(this.options))
      let clonedMainTab = clonedOptions[pIndex]
      clonedMainTab.currentSubId = subId
      clonedMainTab.currentSubTab = name
      clonedMainTab.currentComponent = component
      this.$emit('click', clonedOptions)
      this.setShowSideSlider(false)
    },
    flodSideSlider() {
      this.setShowSideSlider(false)
    },
    ...mapMutations('lottery', {
      setCurrentMainTab: 'SET_CURRENT_MAIN_TAB',
      setCurrentTab: 'SET_CURRENT_TAB',
      setCurrentComponent: 'SET_CURRENT_COMPONENT',
      setCurrentId: 'SET_CURRENT_SUB_ID',
      setShowSideSlider: 'SET_SHOW_SIDE_SLIDER',
      setCurrentLotteryState: 'SET_CURRENT_LOTTERY_STATE'
    })
  },
  computed: {
    ...mapGetters('lottery', ['getCurrentTab', 'getCurrentSubId', 'getShowSideSlider', 'getCurrentLotteryState'])
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .side-slider 
    position fixed 
    top 0px
    right 0
    bottom 0 
    width 88%
    background-color #fff
    height 100%
    z-index 10000
    &.slide-enter-active, &.slide-leave-active
      transition: all 0.2s
    &.slide-enter, &.slide-leave-to
      transform: translate3d(100%, 0, 0)
    .slider-content
      .title
        display flex 
        justify-content space-between 
        width 100% 
        line-height 36px
        box-sizing border-box 
        padding 0 17px
        background $color-text-button
        .title-text 
          font-size 15px 
          font-weight 700
        .icon
          color $color-theme-red
          height 36px
          box-sizing border-box
          .iconfont 
            font-size 19px
      .wrapper 
        position absolute 
        top 36px
        right 0
        bottom 0
        width 100%
        box-sizing border-box 
        overflow scroll
        .options-detail
          .play-mode
            .play-mode-name 
              height 36px
              line-height 36px
              margin 0 15px
              margin-bottom 15px 
              font-size 15px
              font-weight 500
              .indicator 
                color $color-theme-red 
                margin-left 10px
            .play-mode-options 
              display flex
              flex-wrap wrap
              .option
                margin 0px 15px 15px 15px
                &.active 
                  color $color-theme-red
              
</style>